<template>
  <el-dialog
      v-model="visible"
      title="订单备注"
      width="500px"
      @close="handleClose"
  >
    <div v-if="order" class="remark-dialog">
      <!-- 订单信息 -->
      <div class="order-info">
        <h4>订单信息</h4>
        <div class="info-item">
          <span class="label">订单号：</span>
          <span class="value">{{ order.orderNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">订单金额：</span>
          <span class="value price">¥{{ order.totalAmount }}</span>
        </div>
        <div class="info-item">
          <span class="label">收货人：</span>
          <span class="value">{{ order.receiverName }}</span>
        </div>
      </div>

      <!-- 备注表单 -->
      <div class="remark-form">
        <h4>订单备注</h4>
        <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="80px"
        >
          <el-form-item label="备注内容" prop="remark">
            <el-input
                v-model="form.remark"
                :rows="4"
                maxlength="300"
                placeholder="请输入订单备注"
                show-word-limit
                type="textarea"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button
            :loading="loading"
            type="primary"
            @click="handleSubmit"
        >
          保存备注
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {computed, reactive, ref, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {useOrderStore} from '@/store/order'

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  order: {
    type: Object,
    default: null
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'success'])

// Store
const orderStore = useOrderStore()

// 响应式数据
const formRef = ref()
const loading = ref(false)

const form = reactive({
  remark: ''
})

const rules = {
  remark: [
    {required: true, message: '请输入订单备注', trigger: 'blur'},
    {max: 300, message: '备注内容不能超过300字符', trigger: 'blur'}
  ]
}

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 监听订单变化，初始化表单
watch(() => props.order, (newOrder) => {
  if (newOrder) {
    form.remark = newOrder.remark || ''
  }
}, {immediate: true})

// 方法
const handleClose = () => {
  visible.value = false
  resetForm()
}

const resetForm = () => {
  form.remark = ''
  formRef.value?.clearValidate()
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    loading.value = true

    await orderStore.updateOrderRemark(props.order.id, {
      remark: form.remark
    })

    ElMessage.success('备注保存成功')
    emit('success')
    handleClose()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('保存备注失败:', error)
      ElMessage.error('保存备注失败，请重试')
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.remark-dialog {
  max-height: 60vh;
  overflow-y: auto;
}

.order-info {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.order-info h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
  line-height: 1.5;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  width: 80px;
  color: #606266;
  font-size: 14px;
}

.value {
  flex: 1;
  color: #303133;
  font-size: 14px;
}

.price {
  color: #e6a23c;
  font-weight: 600;
}

.remark-form h4 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.dialog-footer {
  text-align: right;
}
</style>
